.premium-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	line-height: 20px;
	padding: 0 10px 0 9px;
	border-radius: 20px; /* stylelint-disable-line scales/radii */
	margin-left: 10px;
	box-sizing: border-box;
	font-size: 0.75rem;
	color: var(--studio-white);
	background: var(--studio-black);
	z-index: 1;

	&--is-clickable {
		cursor: pointer;

		.accessible-focus &:focus {
			box-shadow: 0 0 0 2px var(--color-primary-light);
		}
	}

	.design-picker .design-picker__option-meta & {
		min-height: 0;
	}

	.premium-badge__logo {
		margin-top: -1px;
		margin-right: 3px;
		fill: currentColor;
	}

	&.premium-badge__compact-animation {
		position: relative;
		padding: 0 10px 0 25px;
		cursor: default;
		overflow: hidden;

		&,
		.premium-badge__logo {
			transition-property: all;
			transition-duration: 0.1s;
			transition-timing-function: ease-out;
		}

		.premium-badge__logo {
			position: absolute;
			left: 7px;
			width: 14px;
			height: 14px;
			margin: 0;
		}

		&.premium-badge--compact {
			padding: 0 0 0 20px;

			.premium-badge__logo {
				left: 3px;
			}

			.premium-badge__label {
				width: 0;
			}
		}

		.premium-badge__label {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.components-tooltip .components-popover__content {
		border-radius: 4px;
		margin: 8px;
		background-color: var(--studio-gray-100);
		white-space: pre-line;

		> div {
			max-width: 300px;
			width: max-content;
			padding: 8px 10px;
			text-align: start;
		}
	}
}

.premium-badge__popover.popover {
	max-width: 300px;
	outline: none;
	.popover__inner {
		background-color: #000;
		color: #eee;
		padding: 0.25rem;
		border-radius: 4px;
		border: 0;
	}
	&.is-bottom-left,
	&.is-bottom-right {
		.popover__arrow {
			&::before {
				border-bottom-color: #000 !important;
			}
		}
	}
	&.is-top-left {
		.popover__arrow {
			&::before {
				border-top-color: #000 !important;
			}
		}
	}
	&.is-bottom {
		.popover__arrow {
			&::before {
				border-bottom-color: #000 !important;
			}
		}
	}
	.popover__arrow {
		border-color: transparent;
	}
}
